<template>
  <demo :code-str="codeStr" :code-desc="codeDesc">
    <template #componentName>按钮类型</template>
    <template #componentDesc>按钮支持 default、primary、info、warning、danger 五种类型，默认为 default。</template>
    <template #component>
        <h-row>
            <h-button>默认按钮</h-button>
            <h-button type="primary">主要按钮</h-button>
            <h-button type="success">成功按钮</h-button>
            <h-button type="info">信息按钮</h-button>
            <h-button type="warning">警告按钮</h-button>
            <h-button type="danger">危险按钮</h-button>
        </h-row>
    </template>
</demo>
</template>

<script>
export default {
  name: "MobileV1ButtonTypeDemo",
  data() {
    return {
      codeDesc: '按钮支持 <span>default</span>、<span>primary</span>、<span>info</span>、<span>warning</span>、<span>danger</span> 五种类型，默认为 <span>default</span>。',
      // 注意转义：https://github.com/vuejs/vue-loader/issues/506
      codeStr: `
        <template>
          <h-row>
              <h-button>默认按钮</h-button>
              <h-button type="primary">主要按钮</h-button>
              <h-button type="success">成功按钮</h-button>
              <h-button type="info">信息按钮</h-button>
              <h-button type="warning">警告按钮</h-button>
              <h-button type="danger">危险按钮</h-button>
          </h-row>
        <\/template>
        <script>
          import { HRow, HButton} from "hztech.vant"
          export default {
            components: {
              HRow,
              HButton
            }
          }
        <\/script>
        <style>
        </style>
      `.replace(/^ {8}/gm, '').trim()
    }
  }
}
</script>

<style>

</style>